<!--
 * @Date: 2024-09-12 10:25:10
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 雷达图
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__radar" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  GridComponent,
  TitleComponent,
  DatasetComponent,
  LegendComponent
} from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { isEmpty, isObject } from 'lodash-es';
echarts.use([
  TooltipComponent,
  GridComponent,
  TitleComponent,
  DatasetComponent,
  LegendComponent,
  RadarChart,
  CanvasRenderer
]);

defineOptions({
  name: 'LcChartRadar'
});
const props = defineProps(chartProps);
let indicators = [];

const processData = (data, mapOptions) => {
  let transformData = [];
  // 设置了映射字段 或者 数据里有name和value字段
  if (!isEmpty(mapOptions) || (isObject(data[0]) && data[0]['name'] && data[0]['value'])) {
    let indicatorsName = [];
    if ((mapOptions && mapOptions.type) || data[0]['type']) {
      const groupData = {};
      const indicatorsObj = {};
      data.forEach((item) => {
        //分组
        const groupType = item[mapOptions?.type || 'type'];
        groupData[groupType] = groupData[groupType] ?? [];
        groupData[groupType].push(item);
        // 指标
        const indicatorType = item[mapOptions?.dimension || 'name'];
        indicatorsObj[indicatorType] = indicatorsObj[indicatorType] ?? [];
        indicatorsObj[indicatorType].push(item);
      });
      // 获取指标数据
      indicatorsName = Object.keys(indicatorsObj);

      const groupKeys = Object.keys(groupData);
      groupKeys.forEach((group) => {
        let indicatorsArray = new Array(indicatorsName.length).fill(0);
        groupData[group].forEach((item) => {
          indicatorsArray[indicatorsName.indexOf(item[mapOptions?.dimension || 'name'])] =
            item[mapOptions?.valueMap || 'value'];
        });
        transformData.push({
          name: group,
          value: indicatorsArray
        });
      });
    } else {
      let tempValues = [];
      data.forEach((item) => {
        indicatorsName.push(item[mapOptions?.dimension || 'name']);
        tempValues.push(item[mapOptions?.valueMap || 'value']);
      });
      transformData.push({
        name: '',
        value: tempValues
      });
    }
    indicators = indicatorsName.map((item) => ({ name: item }));
  } else {
    transformData = data;
  }
  return transformData;
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  if (Array.isArray(options['series'])) {
    options['series'][0]['data'] = processedData;
  } else {
    options['series']['data'] = processedData;
  }
  options['radar']['indicator'] = indicators;
  return options;
});
</script>
